<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">测试普通函数this_1</button>
		<button id="btn2">测试箭头函数this_2</button>
		<script type="text/javascript">
			//普通函数
			let btn = document.getElementById('btn');
			btn.onclick = function () {
			    console.log(this);//<button id="btn">测试普通函数this_1</button>
			};
			
			//箭头函数
			let btn2 = document.getElementById('btn2');
			btn2.onclick=()=>{
				console.log(this)//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
			}
			
			let obj = {
			     name : '箭头函数外层是否有函数',
			     getName : () => {
			         btn2.onclick = () => {
			             console.log(this);//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
			         };
			     }
			 };
			 obj.getName();
				
			
			'use strice'
			const Jelly={
				name:'jelly',
				hobies:['coding','sleeping','reading'],
				printHobbies:function(){
					console.log(this);//{name: "jelly", hobies: Array(3), printHobbies: ƒ}
					// map函数的回调函数,是一个独立的函数.当一个函数独立运行的时候,没有作为一个对象的方法调用,并且没有通过call/apple/bind改变this指向的时候,this则指向window(严格模式指向undefined)
					// 解决方法：一先将this保存下来，二使用箭头函数
					var self=this;
					this.hobies.map(function(hobby){
						// console.log(this);//window
						console.log(`${self.name} loves ${hobby}`)
					})
					
					this.hobies.map((hobby)=>{//箭头函数没有自己的this
						console.log(this);//{name: "jelly", hobies: Array(3), printHobbies: ƒ}
						console.log(`${this.name} loves ${hobby}`)
					})
				},
			}
			Jelly.printHobbies();
		</script>
	</body>
</html>
